<template>
  <div class="detail">
    <!-- 商品分类导航 -->
    <!-- <TypeNav /> -->

    <!-- 主要内容区域 -->
    <section class="con">
      <!-- 导航路径区域 -->

      <div class="line">
        <div class="conPoin">
          <span>百丽</span>
          <span>球鞋</span>
          <span>小罗足球鞋</span>
        </div>
        <div class="conPoin1">
          <a href="#">商品评价</a>
          <a href="#">客户评价</a>
          <a href="#">客户咨询</a>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="mainCon">
        <!-- 左侧放大镜区域 -->
        <div class="previewWrap">
          <!--放大镜效果-->
          <zoom :skuImageList="skuInfo.simage" />
          <!-- <Zoom :shoePhotos="shoePhotos" /> -->
          <!-- 小图列表 -->
          <ImageList :shoePhotos="shoePhotos" />
        </div>
        <!-- 右侧选择区域布局 -->
        <div class="InfoWrap">
          <div class="goodsDetail">
            <h3 class="InfoName">{{ skuInfo[0].sname }}</h3>
            <div class="priceArea">
              <div class="priceArea1">
                <div class="title">
                  价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                </div>
                <div class="price">
                  <i>¥</i>
                  <em>{{ skuInfo[0].sdiscount }}</em>
                </div>
              </div>
            </div>
          </div>

          <div class="choose">
            <div class="chooseArea">
              <div class="choosed"></div>
              <dl>
                <dt class="title">商品原价</dt>
                <dd changepirce="90">￥{{ skuInfo[0].sprices }}</dd>
              </dl>
              <dl>
                <dt class="title">商品编号</dt>
                <dd changepirce="1300">{{ skuInfo[0].snum }}</dd>
              </dl>
              <dl>
                <dt class="title">可得积分</dt>
                <dd class="price" changepirce="-1000">
                  {{ skuInfo[0].sintegral }}
                </dd>
              </dl>
              <dl>
                <dt class="title">已&nbsp;&nbsp;出&nbsp;&nbsp;售</dt>
                <dd class="price" changepirce="-1000">
                  {{ skuInfo[0].stimessold }}
                </dd>
              </dl>
              <dl>
                <dt class="title">选择尺码</dt>
                <dd
                  v-for="(spuSaleAttr, index) in skuInfo"
                  :key="index"
                  changepirce="0"
                  :class="active == index ? 'active' : ''"
                  @click="selected(index)"
                >
                  {{ spuSaleAttr.sizenum }}
                </dd>
                <!-- <dd changepirce="-240" class="size active">41</dd>
                <dd changepirce="-240" class="size">42</dd>
                <dd changepirce="-390" class="size">43</dd> -->
              </dl>
            </div>
            <div class="cartWrap">
              <div class="controls">
                <input
                  autocomplete="off"
                  class="itxt"
                  v-model="skuNum"
                  @change="changeSkuNum"
                />
                <a href="javascript:" class="plus" @click="skuNum++">+</a>
                <a
                  href="javascript:"
                  class="mins"
                  @click="skuNum > 1 ? skuNum-- : (skuNum = 1)"
                  >-</a
                >
              </div>
              <div class="add">
                <!-- 以前咱们的路由跳转，从A路由跳转到B路由，这里再加入购物车，进行路由跳转之前
                发请求，把你购买的产品的信息通过请求的形式通知服务器，服务器进行相应的存储 -->
                <a @click="addShopcar">加入购物车</a>
              </div>
              <div class="add">
                <a href="javascript:">立即购买</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容详情页 -->
  </div>
</template>

<script>
import ImageList from "./ImageList/ImageList";
import Zoom from "./Zoom/Zoom";
import { mapGetters } from "vuex";

export default {
  name: "Detail",
  data() {
    return {
      skuNum: 1,
      active: 0,
    };
  },

  components: {
    ImageList,
    Zoom,
  },
  mounted() {
    //派发action获取产品详情信息
    // console.log(this.$route.params);
    // this.$store.dispatch("getGoodInfo");
    this.$store.dispatch("getGoodInfo", this.$route.params.sid);
  },
  computed: {
    ...mapGetters(["skuInfo"]),
    //给子组件的数据
    shoePhotos() {
      //如果服务器的数据没有回来，skuInfo是个空对象
      return this.skuInfo.simage || [];
    },
  },
  methods: {
    //鞋码选择部分高亮
    selected(index) {
      this.active = index;
    },
    //表单元素修改产品个数
    changeSkuNum(event) {
      //用户输入进来的文本
      let value = event.target.value * 1;
      //如果用户输入进来的非法,出现NAN或者小于1
      if (isNaN(value) || value < 1) {
        this.skuNum = 1;
      } else {
        this.skuNum = parseInt(value);
      }
    },
    //加入购物车的回调函数
    addShopcar() {
      //1、发请求，将产品加入到数据库（通知服务器）
      try {
        this.$store.dispatch("addOrUpdateShopCart", {
          sid: this.$route.params.sid,
          skuNum: this.skuNum,
        });
        //路由跳转
        //在路由跳转的时候还需要将产品都信息带给下一级的路由组件
        //一些简单的数据skuNum。通过query形式给路由组件传递过去
        //产品信息的数据【比较复杂：skuInfo】，通过会话存储（不持久化，会话结束数据再消失）
        //本地存储|会话存储，一般存储的是字符串
        sessionStorage.setItem("SKUINFO", JSON.stringify(this.skuInfo));
        this.$router.push({
          name: "addCartSuccess",
          query: { skuNum: this.skuNum },
        });
      } catch (error) {
        alert(error.message);
      }
      console.log("first skuNum" + skuNum);
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .con {
    width: 1200px;
    margin: 15px auto 0;
    .line {
      border-top: 1px solid #ededed;
      border-bottom: 1px solid #ededed;
      height: 30px;

      .conPoin {
        padding-bottom: 5px;
        float: left;
        font-size: 16px;
        // padding: 9px 1000px 0 0;

        & > span + span:before {
          content: "/\00a0";
          padding: 0 5px;
          color: #ccc;
          font-size: 20px;
        }
      }
      .conPoin1 {
        float: right;
        padding: 0 0 0 0;

        & > a + a:before {
          content: "|\00a0";
          padding: 0 5px;
          color: #ccc;
          font-size: 18px;
        }
      }
    }
    .mainCon {
      overflow: hidden;
      margin: 5px 0 15px;

      .previewWrap {
        float: left;
        width: 400px;
        position: relative;
      }

      .InfoWrap {
        width: 700px;
        float: right;

        .InfoName {
          float: left;
          font-size: 24px;
          line-height: 21px;
          // margin-top: 15px;
        }

        .priceArea {
          // background: #fee9eb;
          padding: 7px;
          margin: 13px 0;

          .priceArea1 {
            overflow: hidden;
            line-height: 28px;
            margin-top: 30px;

            .title {
              float: left;
              margin-right: 15px;
            }

            .price {
              float: left;
              color: #c81623;

              i {
                font-size: 16px;
              }

              em {
                font-size: 24px;
                font-weight: 700;
              }

              span {
                font-size: 12px;
              }
            }

            .remark {
              float: right;
            }
          }
        }

        .choose {
          .chooseArea {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            dl {
              overflow: hidden;
              margin: 13px 0;

              dt {
                margin-right: 15px;
                float: left;
              }

              dd {
                float: left;
                margin-right: 5px;
                color: #666;
                line-height: 24px;
                padding: 2px 14px;

                .size {
                  float: left;
                  margin-right: 5px;
                  color: #666;
                  line-height: 24px;
                  padding: 2px 14px;
                  border-top: 1px solid #eee;
                  border-right: 1px solid #bbb;
                  border-bottom: 1px solid #bbb;
                  border-left: 1px solid #eee;
                }

                &.active {
                  color: green;
                  border: 1px solid green;
                  // border: 1px solid #bbb;
                }
              }
            }
          }

          .cartWrap {
            .controls {
              width: 48px;
              position: relative;
              float: left;
              margin-right: 15px;

              .itxt {
                width: 38px;
                height: 37px;
                border: 1px solid #ddd;
                color: #555;
                float: left;
                border-right: 0;
                text-align: center;
              }

              .plus,
              .mins {
                width: 15px;
                text-align: center;
                height: 17px;
                line-height: 17px;
                background: #f1f1f1;
                color: #666;
                position: absolute;
                right: -8px;
                border: 1px solid #ccc;
              }

              .mins {
                right: -8px;
                top: 19px;
                border-top: 0;
              }

              .plus {
                right: -8px;
              }
            }

            .add {
              float: left;

              a {
                text-decoration: none;
                background-color: #e1251b;
                margin-left: 10px;
                padding: 0 25px;
                font-size: 16px;
                color: #fff;
                height: 36px;
                width: 80px;
                line-height: 36px;
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>